<!-- 
聊天消息项组件
功能：
1. 显示各种类型的聊天消息(文本、图片、文件、语音等)
2. 处理消息的交互(点击、长按等)
3. 支持消息引用和群消息已读状态
4. 提供消息操作菜单(复制、转发、撤回等)
-->
<template>
	<!-- 主容器: 包含整个消息项的样式和布局 -->
	<view class="chat-msg-item">
		<!-- 水印组件: 用于在消息上添加水印 -->
		<watermark></watermark>
		
		<!-- 系统提示消息: 显示撤回消息或其他提示文本 -->
		<view class="chat-msg-tip"
			v-if="msgInfo.type==$enums.MESSAGE_TYPE.RECALL||msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
			{{msgInfo.content}}
		</view>
		
		<!-- 时间提示: 显示消息发送时间 -->
		<view class="chat-msg-tip" v-if="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">
			{{$date.toTimeText(msgInfo.sendTime)}}
		</view>
		
		<!-- 普通消息容器: 处理常规消息的显示 -->
		<view class="chat-msg-normal" v-if="isNormal" :class="{'chat-msg-mine':msgInfo.selfSend}">
			<!-- 发送者头像: 支持长按查看用户信息 -->
			<head-image class="avatar" 
				:isInfo="groupInfo" 
				@longpress.prevent="$emit('longPressHead')" 
				:type="1" 
				:id="msgInfo.sendId+''" 
				:url="headImage"
				:name="showName" 
				:size="80">
			</head-image>
			
			<!-- 消息内容区: 包含发送者信息和具体消息内容 -->
			<view class="chat-msg-content">
				<!-- 群聊发送者名称: 仅在群聊中显示其他人的消息时显示 -->
				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
					<text>{{showName}}</text>
				</view>
				
				<!-- 消息内容主体: 根据消息类型显示不同的内容 -->
				<view class="chat-msg-bottom">
					<!-- 文本消息: 支持表情显示和文本操作 -->
					<view v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT">
						<pop-menu :items="menuItems" @select="onSelectMenu">
							<rich-text class="chat-msg-text" :nodes="$emo.transform(msgInfo.content)"></rich-text>
						</pop-menu>
					</view>
					
					<!-- 图片消息: 支持预览、加载状态和错误处理 -->
					<view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE">
						<pop-menu :items="menuItems" @select="onSelectMenu">
							<view class="img-load-box">
								<image class="send-image" 
									mode="aspectFill" 
									:src="JSON.parse(msgInfo.content).thumbUrl"
									lazy-load="true" 
									@click.stop="onShowFullImage()"
									@error="onImageError">
								</image>
								<view class="image-placeholder" v-if="imageLoadError">
									<text class="iconfont icon-image-error"></text>
									<text class="error-text">图片加载失败</text>
								</view>
								<loading v-if="loading"></loading>
							</view>
						</pop-menu>
						<text title="发送失败" v-if="loadFail" @click="onSendFail"
							class="send-fail iconfont icon-warning-circle-fill">
						</text>
					</view>

					<!-- 文件消息: 显示文件信息并支持下载 -->
					<view class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE">
						<pop-menu :items="menuItems" @select="onSelectMenu">
							<view class="chat-file-box" @click="onFileClick">
								<view class="file-icon">
									<image :src="getIconUrl(data.url)" mode="aspectFit"></image>
								</view>
								<view class="file-info">
									<view class="file-name text-ellipsis">{{data.name}}</view>
									<view class="file-size">{{fileSize}}</view>
								</view>
							</view>
						</pop-menu>
						<text title="发送失败" v-if="loadFail" @click="onSendFail"
							class="send-fail iconfont icon-warning-circle-fill">
						</text>
					</view>

					<!-- 语音消息: 支持播放控制和时长显示 -->
					<pop-menu v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO" :items="menuItems" @select="onSelectMenu">
						<view class="chat-msg-audio chat-msg-text" @click="onPlayAudio()">
							<text class="iconfont icon-voice-play"></text>
							<text class="chat-audio-text">{{JSON.parse(msgInfo.content).duration+'"'}}</text>
							<text v-if="audioPlayState=='PAUSE'" class="iconfont icon-play"></text>
							<text v-if="audioPlayState=='PLAYING'" class="iconfont icon-pause"></text>
						</view>
					</pop-menu>

					<!-- 引用消息: 显示被引用的消息内容 -->
					<view v-if="msgInfo.privateMessage" class="quote-wrapper">
						<view class="quote-message" @click="positioningMsg">
							<!-- 引用消息头部: 显示发送者和时间 -->
							<view class="quote-header">
								<text class="quote-name">{{msgInfo.privateMessage.sendNickName}}</text>
								<text class="quote-time">{{quoteTime}}</text>
							</view>
							
							<!-- 引用的文本消息 -->
							<view v-if="msgInfo.privateMessage.type == $enums.MESSAGE_TYPE.TEXT" class="quote-content">
								{{msgInfo.privateMessage.content}}
							</view>
							
							<!-- 引用的图片消息: 显示缩略图 -->
							<view v-if="msgInfo.privateMessage.type == $enums.MESSAGE_TYPE.IMAGE" class="quote-content quote-media">
								<text class="media-text">[图片]</text>
								<image class="quote-thumbnail" 
									:src="JSON.parse(msgInfo.privateMessage.content).thumbUrl" 
									mode="aspectFill">
								</image>
							</view>
							
							<!-- 引用的文件消息: 显示文件图标和名称 -->
							<view v-if="msgInfo.privateMessage.type == $enums.MESSAGE_TYPE.FILE" class="quote-content quote-media">
								<text class="media-text">[文件] {{fileData.name}}</text>
								<image class="quote-file-icon" 
									:src="getIconUrl(fileData.url)" 
									mode="aspectFit">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 群消息已读状态组件: 显示消息的已读状态 -->
		<chat-group-readed 
			ref="chatGroupReaded" 
			:groupMembers="groupMembers" 
			:msgInfo="msgInfo">
		</chat-group-readed>
	</view>
</template>

<script>
	import * as fileIcon from '@/utils/fileIcon.js';
	export default {
		name: "chat-message-item",
		props: {
			headImage: {
				type: String,
				required: true
			},
			showName: {
				type: String,
				required: true
			},
			msgInfo: {
				type: Object,
				required: true
			},
			groupMembers: {
				type: Array
			},
			isAdmin:{
				type:Boolean,
				default: false
			},
			groupInfo:{
				type: Boolean,
				default: false
			},
			tagId:{
				type:Number,
				required: true
			}
		},
		data() {
			return {
				audioPlayState: 'STOP',
				innerAudioContext: null,
				menu: {
					show: false,
					style: ""
				},
				imageLoadError: false
			}
		},
		methods: {
			/**
			 * 定位到引用的消息
			 * 当点击引用消息时,滚动到原始消息的位置
			 */
			positioningMsg(){
				if(this.tagId==""){
					return;
				}
				const target = document.getElementById('chat-item-'+(this.tagId-3));
					target.scrollIntoView({
						behavior: 'smooth'
					});
				//this.tagId="";
			},
			/**
			 * 获取文件图标URL
			 * @param {string} url - 文件URL
			 * @returns {string} 返回对应的文件图标URL
			 */
			getIconUrl(url){
				let data=fileIcon.getUrl(url);
				return data;
			},
			/**
			 * 处理文件发送失败的情况
			 * 显示提示信息,告知用户需要手动重新发送
			 */
			onSendFail() {
				uni.showToast({
					title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送",
					icon: "none"
				})
			},
			/**
			 * 音频消息播放控制
			 * 处理语音消息的播放、暂停、继续播放等状态
			 */
			onPlayAudio() {
				// 首次播放时初始化音频播放器
				if (!this.innerAudioContext) {
					this.innerAudioContext = uni.createInnerAudioContext();
					let url = JSON.parse(this.msgInfo.content).url;
					this.innerAudioContext.src = url;
					
					// 监听播放结束事件
					this.innerAudioContext.onEnded((e) => {
						console.log('播放结束');
						this.audioPlayState = "STOP"
					})
					
					// 监听播放错误事件
					this.innerAudioContext.onError((e) => {
						console.log("播放音频出错");
						console.log(e)
					});
				}

				// 根据当前播放状态进行相应处理
				if (this.audioPlayState == 'STOP') {
					// 从停止状态开始播放
					this.innerAudioContext.play();
					this.audioPlayState = "PLAYING";
				} else if (this.audioPlayState == 'PLAYING') {
					// 播放中则暂停
					this.innerAudioContext.pause();
					this.audioPlayState = "PAUSE"
				} else if (this.audioPlayState == 'PAUSE') {
					// 暂停状态则继续播放
					this.innerAudioContext.play();
					this.audioPlayState = "PLAYING"
				}
			},
			/**
			 * 处理消息菜单选项的选择
			 * @param {Object} item - 选中的菜单项信息
			 */
			onSelectMenu(item) {
				this.msgInfo.tagId=this.tagId;
				this.$emit(item.key.toLowerCase(), this.msgInfo);
				this.menu.show = false;
			},
			/**
			 * 显示图片全屏预览
			 * 点击图片消息时调用,可以全屏查看原图
			 */
			onShowFullImage() {
				let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
				uni.previewImage({
					urls: [imageUrl]
				})
			},
			/**
			 * 显示群消息已读列表
			 * 打开显示已读群成员的弹窗
			 */
			onShowReadedBox() {
				this.$refs.chatGroupReaded.open();
			},
			/**
			 * 处理文件消息的点击事件
			 * 下载并打开文件
			 */
			onFileClick() {
				const fileUrl = this.data.url;
				if(fileUrl) {
					// 下载文件
					uni.downloadFile({
						url: fileUrl,
						success: (res) => {
							if (res.statusCode === 200) {
								// 下载成功后打开文件
								uni.openDocument({
									filePath: res.tempFilePath,
									success: function () {
										console.log('打开文档成功');
									},
									fail: function() {
										uni.showToast({
											title: '无法打开此类型文件',
											icon: 'none'
										});
									}
								});
							}
						},
						fail: () => {
							uni.showToast({
								title: '文件下载失败',
								icon: 'none'
							});
						}
					});
				}
			},
			/**
			 * 处理图片加载失败的情况
			 * 设置标志以显示占位图
			 */
			onImageError() {
				this.imageLoadError = true;
			}
		},
		computed: {
			/**
			 * 判断消息是否正在加载中
			 * @returns {boolean} true表示正在加载
			 */
			loading() {
				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
			},
			/**
			 * 判断消息是否加载失败
			 * @returns {boolean} true表示加载失败
			 */
			loadFail() {
				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
			},
			/**
			 * 获取消息内容的解析数据
			 * @returns {Object} 解析后的消息内容对象
			 */
			data() {
				return JSON.parse(this.msgInfo.content)
			},
			/**
			 * 处理引用消息中的文件数据
			 * @returns {Object} 处理后的文件信息,包含文件大小的格式化
			 */
			fileData() {
				let datas=JSON.parse(this.msgInfo.privateMessage.content);
				let size = datas.size;
				if (size > 1024 * 1024) {
					size = Math.round(size / 1024 / 1024) + "M";
				}else if (size > 1024) {
					size = Math.round(size / 1024) + "KB";
				}else{
					size + "B";
				}
				//这里的文件名称需要改一下  文字长了就会出现样式乱
				datas.fileSize=size;
				return datas;
			},
			/**
			 * 获取引用消息的显示内容
			 * @returns {string} 格式化后的引用消息内容
			 */
			content(){
				let name=this.msgInfo.privateMessage.sendNickName+" : ";
				if(this.msgInfo.privateMessage.type==1||this.msgInfo.privateMessage.type==2){
					
				}else{
					name+=this.msgInfo.privateMessage.content
				}
				return name
			},
			/**
			 * 格式化文件大小显示
			 * @returns {string} 格式化后的文件大小(B/KB/MB)
			 */
			fileSize() {
				let size = this.data.size;
				if (size > 1024 * 1024) {
					return Math.round(size / 1024 / 1024) + "M";
				}
				if (size > 1024) {
					return Math.round(size / 1024) + "KB";
				}
				return size + "B";
			},
			/**
			 * 生成消息操作菜单项
			 * @returns {Array} 菜单选项数组
			 */
			menuItems() {
				let items = [];
				if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT) {
					items.push({
						key: 'COPY',
						name: '复制',
						icon: 'bars'
					});
				}
				if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
					items.push({
						key: 'RECALL',
						name: '撤回',
						icon: 'refreshempty'
					});
				}
				if(this.isAdmin==true && !this.msgInfo.selfSend){
					items.push({
						key: 'RECALLTHIS',
						name: '撤回此条消息',
						icon: 'refreshempty'
					});
				}
				items.push({
					key: 'DELETE',
					name: '删除',
					icon: 'trash',
					color: '#e64e4e'
				},{key: 'COLLECT',
					name: '收藏',
					icon: 'star',
				},{key: 'FORWARD',
					name: '转发',
					icon: 'redo',
				},{key: 'QUOTE',
					name: '引用',
					icon: 'chat',
					});
				if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.FILE) {
					items.push({
						key: 'DOWNLOAD',
						name: '下载并打开',
						icon: 'download'
					});
				}
				return items;
			},
			/**
			 * 判断是否是动作类消息
			 * @returns {boolean} true表示是动作类消息
			 */
			isAction() {
				return this.$msgType.isAction(this.msgInfo.type);
			},
			/**
			 * 判断是否是普通消息
			 * @returns {boolean} true表示是普通消息或动作消息
			 */
			isNormal() {
				const type = this.msgInfo.type;
				return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
			},
			/**
			 * 获取引用消息的时间显示
			 * @returns {string} 格式化后的时间文本
			 */
			quoteTime() {
				if (!this.msgInfo.privateMessage) return '';
				return this.$date.toTimeText(this.msgInfo.privateMessage.sendTime);
			}
		}

	}
</script>

<style scoped lang="scss">
	.chat-msg-item {
		padding: 2rpx 20rpx; // 设置消息项的内边距
		background-color: #f5f5f5; // 设置消息项的背景色

		.chat-msg-tip {
			line-height: 60rpx; // 设置消息提示的行高
			text-align: center; // 设置文本居中
			color: #555; // 设置文本颜色
			font-size: 24rpx; // 设置字体大小
			padding: 10rpx; // 设置内边距
		}

		.chat-msg-normal {
			position: relative; // 设置相对定位，以便子元素绝对定位
			font-size: 0; // 隐藏字体大小，避免影响布局
			margin-bottom: 15rpx; // 设置底部外边距
			padding-left: 110rpx; // 设置左侧内边距，留出头像位置
			min-height: 80rpx; // 设置最小高度

			.avatar {
				position: absolute; // 设置头像为绝对定位
				top: 0; // 顶部对齐
				left: 0; // 左侧对齐
			}

			.chat-msg-content {
				text-align: left; // 设置消息内容左对齐

				.chat-msg-top {
					display: flex; // 使用flex布局
					flex-wrap: nowrap; // 不换行
					color: #333; // 设置文本颜色
					font-size: 24rpx; // 设置字体大小
					line-height: 24rpx; // 设置行高
				}

				.chat-msg-bottom {
					display: inline-block; // 设置为行内块元素
					padding-right: 80rpx; // 设置右侧内边距

					.chat-msg-text {
						position: relative; // 设置相对定位
						line-height: 1.4; // 设置行高
						padding: 12rpx 20rpx; // 设置内边距
						background-color: #ffffff; // 设置背景色
						border-radius: 10rpx; // 设置圆角
						color: #333; // 设置字体颜色
						font-size: 28rpx; // 设置字体大小
						text-align: left; // 设置文本左对齐
						display: inline-block; // 设置为行内块元素
						border: 1px solid #e5e5e5; // 设置边框
						box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1); // 设置阴影效果
						word-break: break-word; // 允许单词换行
						max-width: 100%; // 设置最大宽度
						white-space: pre-wrap; // 保留空格并换行
						overflow-wrap: break-word; // 允许长单词换行
						margin-left: 16rpx; // 设置左边距
						
						&:after {
							content: ''; // 伪元素内容为空
							position: absolute; // 设置绝对定位
							left: -8rpx; // 设置左边距
							top: 16rpx; // 设置顶部对齐
							width: 0; // 宽度为0
							height: 0; // 高度为0
							border-style: solid; // 设置边框样式
							border-width: 6rpx 12rpx 6rpx 0; // 设置边框宽度
							border-color: transparent #ffffff transparent transparent; // 设置边框颜色
							z-index: 1; // 设置层级
						}
						
						&:before {
							content: ''; // 伪元素内容为空
							position: absolute; // 设置绝对定位
							left: -10rpx; // 设置左边距
							top: 15rpx; // 设置顶部对齐
							width: 0; // 宽度为0
							height: 0; // 高度为0
							border-style: solid; // 设置边框样式
							border-width: 7rpx 13rpx 7rpx 0; // 设置边框宽度
							border-color: transparent #e5e5e5 transparent transparent; // 设置边框颜色
							z-index: 0; // 设置层级
						}
					}

					.chat-msg-image {
						display: inline-block; // 设置为行内块元素
						position: relative; // 设置相对定位
						border-radius: 4rpx; // 设置圆角
						overflow: hidden; // 隐藏溢出内容
						
						.img-load-box {
							position: relative; // 设置相对定位
							background: #f7f7f7; // 设置背景色
							border-radius: 8rpx; // 设置圆角
							overflow: hidden; // 隐藏溢出内容
							min-width: 150rpx; // 设置最小宽度
							min-height: 150rpx; // 设置最小高度
							
							.send-image {
								max-width: 250rpx; // 设置最大宽度
								max-height: 250rpx; // 设置最大高度
								display: block; // 设置为块元素
								border-radius: 8rpx; // 设置圆角
							}
							
							.image-placeholder {
								position: absolute; // 设置绝对定位
								top: 0; // 顶部对齐
								left: 0; // 左侧对齐
								right: 0; // 右侧对齐
								bottom: 0; // 底部对齐
								display: flex; // 使用flex布局
								flex-direction: column; // 垂直排列
								align-items: center; // 水平居中
								justify-content: center; // 垂直居中
								background: #f7f7f7; // 设置背景色
								
								.icon-image-error {
									font-size: 48rpx; // 设置图标大小
									color: #999; // 设置颜色
									margin-bottom: 8rpx; // 设置底部外边距
								}
								
								.error-text {
									font-size: 24rpx; // 设置字体大小
									color: #999; // 设置颜色
								}
							}
							
							loading {
								position: absolute; // 设置绝对定位
								top: 50%; // 垂直居中
								left: 50%; // 水平居中
								transform: translate(-50%, -50%); // 通过变换居中
							}
						}

						.send-fail {
							position: absolute; // 设置绝对定位
							right: -40rpx; // 右侧对齐
							top: 50%; // 垂直居中
							transform: translateY(-50%); // 通过变换居中
							color: #e60c0c; // 设置颜色
							font-size: 30rpx; // 设置字体大小
						}
					}

					.chat-msg-file {
						display: inline-block; // 设置为行内块元素
						max-width: 350rpx; // 设置最大宽度
						
						.chat-file-box {
							display: flex; // 使用flex布局
							background: #FFFFFF; // 设置背景色
							border-radius: 10rpx; // 设置圆角
							padding: 20rpx; // 设置内边距
							box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1); // 设置阴影效果
							
							.file-icon {
								width: 80rpx; // 设置文件图标宽度
								height: 80rpx; // 设置文件图标高度
								margin-right: 20rpx; // 设置右侧外边距
								flex-shrink: 0; // 防止缩小
								
								image {
									width: 100%; // 设置图标宽度为100%
									height: 100%; // 设置图标高度为100%
								}
							}
							
							.file-info {
								flex: 1; // 允许文件信息占据剩余空间
								min-width: 0; // 防止文件名超长影响布局
								
								.file-name {
									font-size: 28rpx; // 设置文件名字体大小
									color: #333; // 设置文件名颜色
									margin-bottom: 8rpx; // 设置底部外边距
									line-height: 1.4; // 设置行高
									word-break: break-all; // 允许单词换行
									display: -webkit-box; // 使用webkit盒子模型
									-webkit-line-clamp: 2; // 限制行数为2
									-webkit-box-orient: vertical; // 垂直排列
									overflow: hidden; // 隐藏溢出内容
								}
								
								.file-size {
									font-size: 24rpx; // 设置文件大小字体大小
									color: #999; // 设置文件大小颜色
								}
							}
						}
					}

					.chat-msg-audio {
						display: inline-flex; // 设置为行内flex布局
						align-items: center; // 垂直居中
						background: #fff; // 设置背景色
						border-radius: 10rpx; // 设置圆角
						padding: 12rpx 20rpx; // 设置内边距
						min-width: 80rpx; // 设置最小宽度
						max-width: 300rpx; // 设置最大宽度

						.icon-voice-play {
							font-size: 32rpx; // 设置播放图标大小
							color: #333; // 设置颜色
							margin-right: 10rpx; // 设置右侧外边距
						}

						.chat-audio-text {
							font-size: 28rpx; // 设置音频文本字体大小
							color: #333; // 设置音频文本颜色
						}
					}

					.chat-realtime {
						display: flex; // 使用flex布局
						align-items: center; // 垂直居中

						.iconfont {
							font-size: 20px; // 设置图标大小
							padding-right: 8px; // 设置右侧内边距
						}
					}

					.chat-msg-status {
						display: block; // 设置为块元素

						.chat-readed {
							font-size: 12px; // 设置已读状态字体大小
							color: #888; // 设置已读状态颜色
							font-weight: 600; // 设置字体加粗
						}

						.chat-unread {
							font-size: 12px; // 设置未读状态字体大小
							color: #f23c0f; // 设置未读状态颜色
							font-weight: 600; // 设置字体加粗
						}
					}

					.chat-receipt {
						font-size: 13px; // 设置回执字体大小
						color: darkblue; // 设置回执颜色
						font-weight: 600; // 设置字体加粗

						.icon-ok {
							font-size: 20px; // 设置确认图标大小
							color: #329432; // 设置确认图标颜色
						}
					}
				}
			}

			&.chat-msg-mine {
				text-align: right; // 发送方消息右对齐
				padding-left: 0; // 移除左侧内边距
				padding-right: 110rpx; // 设置右侧内边距

				.avatar {
					left: auto; // 自动左对齐
					right: 0; // 右侧对齐
				}

				.chat-msg-content {
					text-align: right; // 发送方消息内容右对齐

					.chat-msg-bottom {
						padding-left: 80rpx; // 设置左侧内边距
						padding-right: 0; // 移除右侧内边距

						.chat-msg-text {
							background-color: #a0e75a; // 设置发送方消息气泡背景色
							border: 1px solid #8acc4c; // 设置发送方消息气泡边框
							
							&:after {
								left: auto; // 自动左对齐
								right: -12rpx; // 设置右边距
								border-width: 6rpx 0 6rpx 12rpx; // 设置边框宽度
								border-color: transparent transparent transparent #a0e75a; // 设置边框颜色
							}
							
							&:before {
								left: auto; // 自动左对齐
								right: -14rpx; // 设置右边距
								border-width: 7rpx 0 7rpx 13rpx; // 设置边框宽度
								border-color: transparent transparent transparent #8acc4c; // 设置边框颜色
							}
						}

						.chat-msg-image {
							flex-direction: row-reverse; // 发送方图片消息反向排列
						}

						.chat-msg-file {
							flex-direction: row-reverse; // 发送方文件消息反向排列
						}

						.chat-msg-audio {
							background: #95ec69; // 设置发送方音频消息背景色
							flex-direction: row-reverse; // 发送方音频消息反向排列
							
							.icon-voice-play {
								margin-right: 0; // 移除右侧外边距
								margin-left: 10rpx; // 设置左侧外边距
								transform: rotateY(180deg); // 反转图标
							}
						}

						.chat-realtime {
							display: flex; // 使用flex布局
							flex-direction: row-reverse; // 发送方实时消息反向排列

							.iconfont {
								transform: rotateY(180deg); // 反转图标
							}
						}

					}
				}
			}

		}
	}
	/* 添加引用消息相关样式 */
	.quote-wrapper {
		margin-top: 8rpx; // 设置引用消息的顶部外边距
		text-align: left; // 设置引用消息左对齐
		padding-left: 12rpx; // 设置左侧内边距
		
		.quote-message {
			display: inline-block; // 设置为行内块元素
			background: #f7f7f7; // 设置引用消息背景色
			border-radius: 4rpx; // 设置圆角
			padding: 8rpx 12rpx; // 设置内边距
			max-width: 80%; // 设置最大宽度
			margin-left: 0; // 设置左边距
			
			.quote-header {
				display: flex; // 使用flex布局
				align-items: center; // 垂直居中
				margin-bottom: 4rpx; // 设置底部外边距
				min-width: 240rpx; // 设置最小宽度
				
				.quote-name {
					color: #576b95; // 设置引用者名称颜色
					font-size: 24rpx; // 设置引用者名称字体大小
					margin-right: 12rpx; // 设置右侧外边距
					max-width: 360rpx; // 设置最大宽度
					white-space: nowrap; // 不换行
					overflow: hidden; // 隐藏溢出内容
					text-overflow: ellipsis; // 省略号处理
				}
				
				.quote-time {
					color: #999; // 设置时间颜色
					font-size: 24rpx; // 设置时间字体大小
					flex-shrink: 0; // 防止缩小
				}
			}
			
			.quote-content {
				color: #666; // 设置引用内容颜色
				font-size: 24rpx; // 设置引用内容字体大小
				line-height: 1.4; // 设置行高
				word-break: break-all; // 允许单词换行
				text-align: left; // 设置文本左对齐
				
				&.quote-media {
					display: flex; // 使用flex布局
					align-items: center; // 垂直居中
					
					.media-text {
						flex: 1; // 允许媒体文本占据剩余空间
						margin-right: 10rpx; // 设置右侧外边距
					}
					
					.quote-thumbnail {
						width: 60rpx; // 设置缩略图宽度
						height: 60rpx; // 设置缩略图高度
						border-radius: 4rpx; // 设置圆角
					}
					
					.quote-file-icon {
						width: 40rpx; // 设置文件图标宽度
						height: 40rpx; // 设置文件图标高度
					}
				}
			}
		}
	}

	/* 自己发送的消息样式 */
	.chat-msg-mine {
		text-align: right; // 发送方消息右对齐
		padding-left: 0; // 移除左侧内边距
		padding-right: 110rpx; // 设置右侧内边距

		.chat-msg-content {
			text-align: right; // 发送方消息内容右对齐

			.chat-msg-bottom {
				padding-left: 80rpx; // 设置左侧内边距
				padding-right: 0; // 移除右侧内边距

				.chat-msg-text {
					background-color: #a0e75a; // 设置发送方消息气泡背景色
					border: 1px solid #8acc4c; // 设置发送方消息气泡边框
					
					&:after {
						left: auto; // 自动左对齐
						right: -12rpx; // 设置右边距
						border-width: 6rpx 0 6rpx 12rpx; // 设置边框宽度
						border-color: transparent transparent transparent #a0e75a; // 设置边框颜色
					}
					
					&:before {
						left: auto; // 自动左对齐
						right: -14rpx; // 设置右边距
						border-width: 7rpx 0 7rpx 13rpx; // 设置边框宽度
						border-color: transparent transparent transparent #8acc4c; // 设置边框颜色
					}
				}

				.quote-wrapper {
					padding-left: 0; // 移除左侧内边距
					padding-right: 12rpx; // 设置右侧内边距
					text-align: right; // 设置引用消息右对齐

					.quote-message {
						text-align: left; // 设置引用消息内容左对齐
						margin-right: 0; // 移除右侧外边距
					}
				}
			}
		}
	}
</style>